import { Card, Breadcrumb, Form, Button, Radio, Input, Upload, Space, Select } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import gfm from '@bytemd/plugin-gfm'
import { Editor } from '@bytemd/react'
import 'bytemd/dist/index.css'

import './index.scss'
import { Link } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { http } from '@/utils'
import { setChannels } from '@/store/modules/user'
import { useDispatch, useSelector } from 'react-redux'

// 编辑器插件
const plugins = [gfm()]

const Publish = () => {
  const dispatch = useDispatch()
  const { channels } = useSelector(state => state.user)

  // 文章内容
  const [content, setContent] = useState('')

  // 获取频道列表
  const getChannelsList = async () => {
    const { data: { channels } } = await http.get('channels')

    dispatch(setChannels(channels))
  }

  useEffect(() => {
    getChannelsList()
  }, [])

  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb items={[{ title: <Link to={'/'}>首页</Link> }, { title: '发布文章' }]} />
        }
      >
        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} initialValues={{ type: 1 }}>
          <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入文章标题' }]} >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>

          <Form.Item label="频道" name="channel_id" rules={[{ required: true, message: '请选择文章频道' }]} >
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              {channels.map((item: Channel) => (
                <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item label="内容" name="content" rules={[{ required: true, message: '请输入文章内容' }]} >
            <span></span>
            <Editor value={content} plugins={plugins} onChange={(v) => setContent(v)} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">发布文章</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Publish